今天我們將探討 PrimeVue 強大的功能——Pass Through (PT)，專為解決組件客製化需求而設計。

Energy and persitant conquer all things.
能量和堅持可以克服一切

1. PT (Pass Through) 是什麼？
因應元件客製化，PrimeVue3.29.0版本提供　PT屬性。
允許開發者以聲明式的方式自定義組件的內部元素樣式,而無需覆蓋全局CSS或使用深度選擇器。

PT的主要特點:

1. 聲明式API: 允許通過prop直接傳遞樣式和類。
2. 細粒度控制: 精確地定位組件內部的特定元素。
3. 動態樣式: 支持動態計算的樣式,可以根據組件狀態變化。
4. 類型安全: 提供TypeScript支持,減少錯誤。

在 PrimeVue 中，pt 和 slotProps 是兩個常見的概念，用於自定義組件的樣式和行為。以下是它們的詳細解釋：

1. pt (Property-based Theming)
   pt 是 PrimeVue 提供的一個功能，用於在組件內部應用自定義樣式。pt 允許你通過組件的屬性來設置特定 DOM 元素的樣式，而不是僅僅依賴 CSS 選擇器。這樣可以更精確地控制組件內部的樣式，而不會受到外部 CSS 的干擾。

使用範例：
假設你有一個 Button 組件，你想要改變它的內部樣式，你可以使用 pt 來指定樣式：

<template>
  <Button label="Submit" :pt="{
    root: { class: 'custom-button' },
    label: { style: { fontWeight: 'bold' } }
  }" />
</template>

在這個例子中,我們為Button組件的root元素添加了一個自定義類,並為label元素設置了粗體字體樣式。

pt: 主要用於在組件內部應用自定義樣式，提供一種更精確的樣式控制方法。

全域設定
可以透過在 PrimeVue 的全局配置中進行設置，讓 PT 屬性在所有元件中都能應用統一的樣式。

在 Nuxt 專案的 nuxt.config.js 中，我們可以這樣進行全域配置：

import PrimeVue from 'primevue/config';

export default {
  modules: [
    '@nuxtjs/primevue',
  ],
  primevue: {
    config: {
      pt: {
        Button: {
          root: { class: 'global-button' },
          label: { style: { fontSize: '18px' } }
        }
      }
    }
  }
}

全域配置，統一控制應用中所有 Button 元件的樣式。

結語
今天學習了 PT (Pass Through) 的基本概念和使用方式。
這個強大的工具可以精細控制組件的內部樣式，
透過聲明式 API 實現動態樣式設置，開發 Vue 應用時更高的靈活性和可控性。

這就像是配備爬山的裝備，讓我們能夠更加輕鬆地克服途中的各種障礙。
隨著 PT 功能的掌握，我們在自定義 PrimeVue 組件時更加得心應手。

我們的旅程才剛開始，明天見！

參考資料:
https://v3.primevue.org/passthrough/